<template>
  <div class="service-config-wrapper">
    <div class="search-input-box">
      <el-button type="primary" size="small" @click="addData">新增</el-button>
      <el-button type="danger" size="small" @click="deleteService">删除</el-button>
    </div>
    <div class="table-view-box">
      <table-view :cols="cols" :tableData="tableData" :canCheck="showCheck" :showOperate="true" :buttonCount="1" :operateButtons="operateButtons"
                  :operateSameButton="false" :showPaginator="true" :pageNumber="pageNumber" :pageSize="pageSize" :totalRecords="totalRecords"
                  :clearSelect="clearSelect" @on-operate="clickOperate" @size-change="sizeChange" @current-page-change="pageChange"
                  @preClick="pageChange" @nextClick="pageChange" @select="onSelect" @select-all="onAllSelect">
      </table-view>
    </div>
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="580px">
      <div class="dialog-body" v-if="dialogTitle !== '删除'">
        <input-list-view :items="addInputData" labelWidth="200px" width="520px"></input-list-view>
      </div>
      <span v-if="dialogTitle === '删除'">您确定要删除吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" v-if="dialogTitle === '新增' || dialogTitle === '编辑'" @click="saveServiceConfig">保 存</el-button>
        <el-button type="primary" v-if="dialogTitle === '删除'" @click="confirmDelService">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    name: 'ServiceConfig',
    data() {
      let baseUrl = managerRemoteGatewayUrl;
      return {
        urls: {
          getHeaderUrl: baseUrl + '/serverinfo/header',
          getDataUrl: './static/json/service-config-data.json',
          getServeUrl: baseUrl + '/serverinfo/search', //获取所有服务
          addServeUrl: baseUrl + '/serverinfo/add', //增加服务
          updateServeUrl: baseUrl + '/serverinfo/edit', //编辑服务
          deleteServeUrl: baseUrl + '/serverinfo/delete', //删除服务
          getServiceMonitor: './static/json/service-monitor-data.json',
          getHealthStatusUrl: baseUrl + '/serve/getHealthStatus', //获取健康状态
        },
        cols: [],
        totalTableData: [],
        tableData: [],
        pageNumber: 1,
        pageSize: 10,
        totalRecords: 0,
        clearSelect: false,
        operateButtons: ['编辑'],
        showCheck: false,
        dialogVisible: false,
        dialogTitle: '',
        addInputData: [],
        selectionData: [],
        editProxyUrl: '',
        editId: ''
      }
    },
    methods: {
      getHeader() {
        let me = this;
        this.cols = [];
        this.httpRequest('get',this.urls.getHeaderUrl,{},{
          hideSuccessTip: true,
          ignoreEmptyData: true,
          fullSuccess: true,
        }).then(res => {
          me.cols = res.value.cols;
          me.showCheck = res.value.setting.checkbox;
          me.cols.forEach((d) => {
            d.header === '名称' && (d.header = "子系统名称");
            let obj = me.cloneObj(d);
            obj['label'] = d.header;
            obj['value'] = null;
            obj['required'] = true;
            if (d.addable && !d.hidden) {
              me.addInputData.push(obj);
            }
          })
        });
      },
      getTableData() {
        let me = this;
        this.totalTableData = [];
        this.tableData = [];
        this.pageNumber = 1;
        this.totalRecords = 0;
        this.httpRequest('post',this.urls.getServeUrl,{},{
          hideSuccessTip: true,
          ignoreEmptyData: true,
          fullSuccess: true,
        }).then(res => {
          me.totalTableData = res.value.data.map((d, i) => {
            let obj = me.cloneObj(d);
            return obj;
          });
          me.totalRecords = res.value.rows;
          me.getRealTableData();
          this.totalTableData = res.value.data;
          this.totalRecords = res.value.rows;
          this.getRealTableData();
        });
      },
      sizeChange(size) {
        this.pageNumber = 1;
        this.pageSize = size;
        this.getRealTableData();
      },
      pageChange(page) {
        this.pageNumber = page;
        this.getRealTableData();
      },
      getRealTableData() {
        this.tableData = this.totalTableData.slice((this.pageNumber - 1) * this.pageSize, this.pageNumber * this.pageSize);
      },
      clickOperate(e){
        if(e.btnText === '编辑'){
          this.dialogTitle = '编辑';
          this.addInputData.forEach((d) => {
            d.value = e.row[d.field];
            d.field === 'prefixUrl' && (d.disabled = true);
          });
          this.editProxyUrl = e.row.prefixUrl;
          this.editId = e.row.id;
          this.dialogVisible = true;
        }
      },
      addData() {
        this.dialogTitle = '新增';
        this.addInputData.forEach((d) => {
          d.value = null;
          d.field === 'prefixUrl' && (d.disabled = false);
        });
        this.dialogVisible = true;
      },
      saveServiceConfig() {
        let me = this, mes = this.checkRequire(this.addInputData);
        if (!this.isEmpty(mes)) {
          this.message(this, 'info', mes, true, true, 2000);
          return false;
        }
        let param = {}, url = '', type = '';
        this.addInputData.forEach((d) => {
          param[d.field] = d.value;
        });
        if (this.dialogTitle === '新增') {
          url = this.urls.addServeUrl;
          type = 'post';
        } else if (this.dialogTitle === '编辑') {
          url = this.urls.updateServeUrl;
          type = 'put';
          param["prefixUrl"] = this.editProxyUrl;
          param["id"] = this.editId;
        }
        this.httpRequest(type,url,param,{
          hideSuccessTip: true,
          ignoreEmptyData: true,
          fullSuccess: true,
        }).then(res => {
          me.dialogVisible = false;
          me.getTableData();
        });
      },
      onSelect(selection) {
        this.selectionData = this.cloneObj(selection.selection);
      },
      onAllSelect(selection) {
        this.selectionData = this.cloneObj(selection);
      },
      deleteService() {
        if (this.selectionData.length > 0) {
          this.dialogTitle = '删除';
          this.dialogVisible = true;
        } else {
          this.message(this, 'info', '请至少选择一项进行删除！');
        }
      },
      confirmDelService() {
        let me = this, delArr = [];
        me.clearSelect = false;
        this.selectionData.forEach((d) => {
          delArr.push(d.id);
        });
        this.httpRequest('delete',`${this.urls.deleteServeUrl}?serverid=${delArr.join(",")}`,{},{
          hideSuccessTip: true,
          ignoreEmptyData: true,
          fullSuccess: true,
        }).then(res => {
          me.pageNumber = 1;
          me.pageSize = 10;
          me.dialogVisible = false;
          me.getTableData();
          me.clearSelect = true;
        });
      },
    },
    mounted() {
      this.getHeader();
      this.getTableData();
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  @import "../../../assets/styles/base_style";
  .service-config-wrapper {
    width: 100%;
    min-height: 100%;
    background: #fff;
    padding-bottom: 20px;
    .search-input-box {
      padding-bottom: 15px;
      text-align: right;
    }
  }
</style>
